<template>
    <div>
        插值查找练习：
        <div class="box" v-for="(item, index) in list" :key="item.id">
            <div class="prac-title" v-show="index == num">
                <p>{{ item.title }}</p>
                <ul class="prac-select">
                    <!-- 选项 -->
                    <li v-for="(items, index) in item.option" :key="items.id">
                        <input type="radio" name="radio" @click="checkeditem(item, items)" />
                        {{ items.name }}
                    </li>
                </ul>
                <!-- 操作栏 -->
                <button @click="tolist()">上一题</button>
                <button @click="tonext()">下一题</button>
                <button @click="toview(item.id)">查看答案</button>
                <button @click="tocollect(item)">收藏</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useUserStore } from "../../../../../store/useUserStore.js"

const { changeUser, user } = useUserStore()

const list = [
    {
        exe_id:28,
        alg_id:10,
        id: 1,
        title: "1. 下列关于插值查找的说法错误的是：",
        option: [
            {
                id: 1,
                name: "A. 查找的序列必须有序。",
            },
            {
                id: 2,
                name: "B. 插值查找在分布均匀的情况下时间复杂度为O(n)。",
            },
            {
                id: 3,
                name: "C. 对于分布不均匀的有序序列来说，该算法不一定比二分查找要好。",
            },
            {
                id: 4,
                name: "D. 对于数据量大的以及关键字分布均匀的有序序列来说，插值查找的速度较快。",
            },
        ],
        anser: "B"
    },
    {
        exe_id:29,
        alg_id:10,
        id: 2,
        title: "2. 假设一个数组 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],如果我们要查找元素3，用插值查找第一次应查找第几个元素？",
        option: [
            {
                id: 1,
                name: "A. 第3个。",
            },
            {
                id: 2,
                name: "B. 第4个。",
            },
            {
                id: 3,
                name: "C. 第5个。",
            },
            {
                id: 4,
                name: "D. 第6个。",
            },
        ],
        anser: "A"
    },
    {
        exe_id:30,
        alg_id:10,
        id: 3,
        title: "3. 对于插值查找公式mid = low + (high - low) * (key - arr[low]) / (arr[high] - arr[low])的说法错误的是？",
        option: [
            {
                id: 1,
                name: "A. low表示左边索引left,high表示右边索引right。",
            },
            {
                id: 2,
                name: "B. key就是需要查找的值。",
            },
            {
                id: 3,
                name: "C. mid表示要比较的数值。",
            },
            {
                id: 4,
                name: "D. 该公式具有自适应选择的特性。",
            },
        ],
        anser: "C"
    },
]

const num = ref(0)
// 上一题
const tolist = () => {
    if (num.value == 0) {
        ElMessage.warning("这是第一题哦！");
        return;
    }
    if (num.value === list.length - 1) {

        checkedinp.value = '';
        answer.value = '';
        num.value--;
        return
    }
    if (checkedinp.value === '') {
        ElMessage.warning('还没有答题哦！');
    } else {
        if (checkedinp.value === answer.value) {
            axios.post(`/oasadapi/users/addcorrectnum`, user.user_name);
            ElMessage.success("答案正确！");

        } else {
            axios.post(`/oasadapi/users/addwrongnum`, user.user_name);
            ElMessage.error('答案错误，再思考一下吧');

        }
    }

    checkedinp.value = '';
    answer.value = '';
    num.value--;
}

//选择

const checkedinp = ref('');
const answer = ref("");
const checkeditem = (item, items) => {
    checkedinp.value = items.name[0];
    answer.value = item.anser;
}

// 下一题
const tonext = () => {
    if (checkedinp.value === '') {
        ElMessage.warning('还没有答题哦！');
    } else {
        if (checkedinp.value === answer.value) {
            axios.post(`/oasadapi/users/addcorrectnum`, user.user_name);
            ElMessage.success("答案正确！");

        } else {
            axios.post(`/oasadapi/users/addwrongnum`, user.user_name);
            ElMessage.error('答案错误，再思考一下吧');

        }
    }
    checkedinp.value = '';
    answer.value = '';
    if (num.value === list.length - 1) {
        ElMessage.warning('已经是最后一题了哦！');
    } else {
        num.value++
    }
}

//查看答案
const toview = (id) => {
    let text = ref("");
    list.forEach((item) => {
        if (item.id == id) {
            text.value = item.anser;
        }
    });
    ElMessage({
        message: '答案是：' + text.value,
        type: 'success',
        duration: 1500,
    });
}

// 收藏结构体
const collectData=ref({
  alg_id:"",
  sequnence:"",
  user_name:user.user_name,
  user_id:user.id,
  exe_id:"",
})
// 查找结构体ind
const findData=ref({
  alg_id:"",
  sequnence:"",
  user_id:user.id,
})
// 收藏
const tocollect=async (data)=>{
  findData.value.alg_id=data.alg_id;
  findData.value.sequnence=data.id;
await axios.put(`/oasadapi/collect`,findData.value).then((res)=>{
  if(res.data.length===0){
    collectData.value.alg_id=data.alg_id;
collectData.value.sequnence=data.id;
collectData.value.exe_id=data.exe_id;
 axios.post(`/oasadapi/collect`,collectData.value).then((res)=>{
  if(res.data.code===0){
    ElMessage.success("收藏成功，可在个人中心-收藏习题查看！");
  }else {
    ElMessage.error('收藏失败，请检查网络！');
  }
});
  }else {
    ElMessage.warning('这道题已经被收藏了哦！');
  }
})

}
</script>

<style lang="scss" scoped>
* {
    cursor: default;
}

ul {
    list-style: none;
}

.box {
    width: 100%;
    font-size: 25px;
    margin-top: 30px;
    cursor: default;

    .prac-title {
        font-weight: normal;
    }

    .prac-select {
        font-weight: normal;

        li {
            margin-bottom: 2px;
        }
    }

    button {
        width: 120px;
        height: 40px;
        font-size: 25px;
        border: none;
        margin-left: 10px;
        margin-top: 20px;
        background: rgb(32, 170, 225);
        color: white;
        border-radius: 10px;
        cursor: pointer;
    }
}
</style>